<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <title>影像记忆 | wangruqin.site</title>
    
    <style>
        :root {
            --primary-color: #2c3e50;
            --accent-color: #e74c3c;
            --gutter: 20px;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: rgba(45,45,45,0.95);
        }

        .panel-cover {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .gallery-container {
            flex: 1;
            max-width: 1400px;
            margin: 40px auto 0;
            padding: 0 var(--gutter);
            position: relative;
        }

        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: var(--gutter);
            padding-bottom: 100px;
            min-height: 70vh;
        }

        .photo-card {
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.1);
            overflow: hidden;
            aspect-ratio: 16/9;
        }

        .img-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .photo-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: zoom-in;
            background: rgba(0,0,0,0.1);
        }

        .photo-meta {
            padding: 15px;
        }

        .photo-title {
            color: #fff;
            margin: 0 0 8px;
            font-size: 16px;
        }

        .photo-desc {
            color: rgba(255,255,255,0.8);
            font-size: 14px;
            margin: 0;
        }

        .pagination {
            position: sticky;
            bottom: 0;
            background: linear-gradient(to top, rgba(45,45,45,0.95) 60%, transparent);
            padding: 20px 0;
            display: flex;
            justify-content: center;
            gap: 20px;
            backdrop-filter: blur(10px);
            z-index: 1000;
        }

        .page-btn {
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            color: #fff;
            padding: 10px 30px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .page-btn:hover:not(:disabled) {
            background: rgba(255,255,255,0.2);
        }

        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .modal-content {
            max-width: 90%;
            max-height: 90vh;
            border-radius: 8px;
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .modal-active .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        @media (max-width: 768px) {
            .masonry-grid {
                grid-template-columns: 1fr;
                min-height: 50vh;
            }
            
            .pagination {
                padding: 15px 10px;
                gap: 10px;
            }
            
            .page-btn {
                padding: 8px 20px;
                font-size: 14px;
            }
        }
    </style>
</head>

<body>
    <div class="panel-cover">
        <main class="gallery-container">
            <div class="masonry-grid" id="gallery"></div>
        </main>

        <div class="pagination">
            <button class="page-btn" id="prevPage">← 上一页</button>
            <span id="pageInfo"></span>
            <button class="page-btn" id="nextPage">下一页 →</button>
        </div>

        <div class="modal-overlay" id="modalOverlay">
            <img src="#" alt="大图预览" class="modal-content" id="modalImg">
        </div>
    </div>

    <script>
        // 照片数据
        const photos = [
            { src: "imag/xiaoshihou1.jpg", title: "大头照", desc: "摄于小时候" },
            { src: "imag/xiaoshihou2.jpg", title: "白银滩", desc: "摄于濑溪河白银滩" },
            { src: "imag/xiaoshihou3.jpg", title: "吉他", desc: "摄于老宅门前" },
            { src: "imag/xiaoshihou4.jpg", title: "老房子", desc: "摄于老宅卧室" },
            { src: "imag/red.jpg", title: "红叶", desc: "摄于理工大学荷轩寝室楼下 2024-12-09" },
            { src: "imag/green.jpg", title: "绿叶", desc: "摄于理工大学德保食堂外 2024-12-09" },
            { src: "imag/pool.jpg", title: "大水池子", desc: "摄于理工大学两江校区 2024-11-03 冬天，但那天天气很好" },
            { src: "imag/fireflower.jpg", title: "烟花", desc: "摄于万灵古镇濑溪河畔 2024-08-10 七夕节" },
            { src: "imag/sanxindui.jpg", title: "三星堆", desc: "摄于成都 2025-02-07" },
            { src: "imag/xiyang.jpg", title: "夕阳", desc: "摄于万灵古镇 2022-08-03" },
            { src: "imag/fukanwanling.jpg", title: "俯瞰万灵", desc: "摄于万灵古镇 " },
            { src: "imag/hua1.jpg", title: "花", desc: "摄于重庆理工大学两江校区操场旁" },
            { src: "imag/shaokao1.jpg", title: "老姐", desc: "摄于涪陵 2025-02-15" },
            { src: "imag/shaokao2.jpg", title: "老姐", desc: "摄于涪陵 2025-02-15" },
            { src: "imag/guizhou2.jpg", title: "阿里西里大草原", desc: "摄于贵州 2024-08-29" },
            { src: "imag/guizhou1.jpg", title: "贵阳夜景", desc: "摄于贵州 2024-08-25" },
            { src: "imag/chongqin1.jpg", title: "重庆", desc: "摄于重庆" },
            { src: "imag/hua2.jpg", title: "花", desc: "摄于重庆理工大学两江校区操场旁" },
            { src: "imag/mingyuehu.jpg", title: "明月湖", desc: "摄于重庆两江新区明月湖 2024-03-11" },
            { src: "imag/qixi.jpg", title: "烟花", desc: "摄于万灵古镇濑溪河畔 2024-08-10 七夕节" },
            { src: "imag/ligongxiyang.png", title: "理工夕阳", desc: "摄于重庆理工大学花溪校区" },
            { src: "imag/yumaojian.jpg", title: "喻茂坚纪念馆", desc: "摄于万灵古镇 2024-07-06" },
            { src: "imag/anfu1.jpg", title: "综合大楼", desc: "摄于安富中学 2023-03-11" },
            { src: "imag/jinyunshan.jpg", title: "缙云山", desc: "摄于缙云山 2023-12-30 刚上大一" },
            { src: "imag/anfu3.jpg", title: "高中教室", desc: "摄于安富中学 2023-04-30 距离高考还有37天" },
            { src: "imag/junxun.jpg", title: "军训", desc: "摄于重庆理工大学两江校区操场" },
            { src: "imag/anfu2.jpg", title: "高考前夕", desc: "摄于安富中学 2023-06-05 距离高考还有1天" },
        ];

        const config = {
            currentPage: 1,
            get perPage() {
                const width = window.innerWidth;
                return width >= 1200 ? 6 :  // 3列×2行
                       width >= 768 ? 4 :   // 2列×2行
                       2;                   // 1列×2行
            },
            get totalPages() {
                return Math.ceil(photos.length / this.perPage);
            }
        };

        function initGallery() {
            const start = (config.currentPage - 1) * config.perPage;
            const end = start + config.perPage;
            const gallery = document.getElementById('gallery');
            
            gallery.innerHTML = photos.slice(start, end).map(photo => `
                <div class="photo-card">
                    <div class="img-container">
                        <img src="${photo.src}" 
                             alt="${photo.title}" 
                             class="photo-img"
                             loading="lazy">
                    </div>
                    <div class="photo-meta">
                        <h3 class="photo-title">${photo.title}</h3>
                        <p class="photo-desc">${photo.desc}</p>
                    </div>
                </div>
            `).join('');

            // 补充空白卡片
            const remaining = config.perPage - (end - start);
            if(remaining > 0) {
                gallery.innerHTML += Array(remaining).fill('<div class="photo-card" style="visibility:hidden"></div>').join('');
            }

            // 添加点击事件
            document.querySelectorAll('.photo-img').forEach(img => {
                img.addEventListener('click', showModal);
            });

            updatePagination();
        }

        function updatePagination() {
            document.getElementById('pageInfo').textContent = 
                `${config.currentPage}/${config.totalPages}`;
            document.getElementById('prevPage').disabled = config.currentPage === 1;
            document.getElementById('nextPage').disabled = config.currentPage === config.totalPages;
        }

        function showModal(e) {
            const modal = document.getElementById('modalOverlay');
            const modalImg = document.getElementById('modalImg');
            modalImg.src = e.target.src;
            modal.style.display = 'flex';
            setTimeout(() => modal.classList.add('modal-active'), 10);
        }

        // 事件监听
        document.getElementById('prevPage').addEventListener('click', () => {
            if (config.currentPage > 1) {
                config.currentPage--;
                initGallery();
                window.scrollTo(0, 0);
            }
        });

        document.getElementById('nextPage').addEventListener('click', () => {
            if (config.currentPage < config.totalPages) {
                config.currentPage++;
                initGallery();
                window.scrollTo(0, 0);
            }
        });

        document.getElementById('modalOverlay').addEventListener('click', (e) => {
            if (e.target === modalOverlay) {
                modalOverlay.classList.remove('modal-active');
                setTimeout(() => modalOverlay.style.display = 'none', 300);
            }
        });

        window.addEventListener('resize', initGallery);
        window.addEventListener('load', initGallery);
    </script>
</body>
</html>